<template>
  <div class="tracetask-container">
    <v-layout wrap justify-center align-center>
      <v-flex md12>
        <div class="mission-container">
          <div class="image-wrapper">
            <img :src="mission.productImg" alt />
          </div>
          <div class="info-wrapper elevation-2">
            <div class="title-wrapper">{{ mission.titleEnglish }}</div>

            <div class="info-detail flexbox column">
              <div class="text-left">
                <span class="title-color">Price:</span>
                <span>$ {{ mission.price }}</span>
              </div>
              <div class="text-left">
                <span class="title-color">Reward:</span>
                <span>$ {{ mission.commission ? mission.commission.toFixed(2) : '' }}</span>
              </div>
              <div class="text-left">
                <span class="title-color">Shop:</span>
                <span>$ {{ mission.shopName }}</span>
              </div>
            </div>
          </div>

          <div class="detail-desc">
            <div class="title">Mission Details</div>

            <div class="desc-content">
              <ul class="desc-list">
                <li>
                  1.Please search the keyword "
                  <em class="emp">{{ mission.keyword }}</em> "on the given platform: "
                  <em class="emp">{{ mission.platform | Platform }}</em>"
                </li>
                <li>
                  2. Normally you could find our product "on the 1st page", if not, please continue checking until you find our listing. "Asin:
                  <em class="emp">{{ mission.productAsin }}</em>
                </li>
                <li>3 Please don't go directly to product page anyhow. Please browse other listings as well and then add our product to cart after several minutes, then check out.</li>
                <li>
                  4. last step, Please double check if the ASIN of the product is the same as the one provided by the merchant to avoid buying the wrong product. Asin:
                  <em class="emp">{{ mission.productAsin }}</em>
                </li>
                <li>5. Please test the products and leave in the given platform a review about your feedback with no less than 1 pictures around 2 days after your receipt of the product.</li>
                <li>We believe your comments on the products will Mission great helps for the merchandiser brand broadcasting. You are encouraged to write a message here to the brand through busibusy if you have more suggestions on products. Much thanks again for your participation of the MBTP (Manufacturer's brand test program).</li>
              </ul>
            </div>
          </div>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Api } from "@/api";
import { forEach } from "lodash";
import { KV } from "@/utils/type";
import { PageOptions, TopupStatusKV } from "@/utils/constants";
import { ReqProfitIncome, ReqTaskInfo } from "@/api/bean";
import { getTime } from "@/utils/commonUtils";
import Cookie from 'js-cookie';
declare const $Vue: Vue;

@Component
export default class Missions extends Vue {
  private pageOptions: any = [];
  private buyerStatus: any = TopupStatusKV;

  private queryForm: any = {
    beginTime: "",
    endTime: "",
  };

  private headers: Array<any> = [];

  private missionList: any = [
    {
      taskId: "123"
    }
  ];

  private loading: boolean = false;
  private dialog: boolean = false;
  private dialogItem: any = {};
  private isQuery: boolean = false;

  private pagination: any = {
    pageCount: 20,
    page: 1,
    limit: 10,
    offset: 0
  };

  private getTime(date: string) {
    return getTime(date);
  }

  protected mounted() {
    this.getMissionList({});
    $Vue.$emit("balance");

    $Vue.$emit("title", { message: 'Missions' });
    this.pageOptions = PageOptions.slice();

  }

  private onQuery(from?: string) {
    let params: any = {};

    let valid = 0;
    forEach(this.queryForm, (item, key) => {
      item ? (params[key] = item) : valid++;
    });
    if (valid === 3) {
      return $Vue.$emit("snackbar", {
        message: "请至少填写一个查询条件"
      });
    }

    if (from === undefined) {
      this.pagination.offset = 0;
      this.pagination.page = 1;
    }

    if (this.queryForm.beginTime && this.queryForm.endTime) {
      if (
        new Date(this.queryForm.beginTime).getTime() >
        new Date(this.queryForm.endTime).getTime()
      ) {
        return $Vue.$emit("snackbar", {
          text: "起始日期不能早于结束日期"
        });
      }
      params.endTime = new Date(this.queryForm.endTime + " 23:59:59").getTime();
      params.beginTime = new Date(
        this.queryForm.beginTime + " 00:00:00"
      ).getTime();
    } else if (this.queryForm.beginTime || this.queryForm.endTime) {
      return $Vue.$emit("snackbar", {
        text: "请选择完整起止日期"
      });
    }
    params.limit = this.pagination.limit;
    params.offset = this.pagination.offset;
    this.isQuery = true;
    this.getMissionList(params);
  }

  private onJoinMissionClicked(item: any) {
    this.joinMission(item);
  }

  private onMissionDetail(data: any) {
    this.$router.push({
      name: "MissionDetail",
      params: data
    });
    sessionStorage.setItem("MissionDetail", JSON.stringify(data));
  }

  private onPageChange(value: any) {
    let limit = this.pagination.limit;
    this.pagination.offset = (value - 1) * limit;
    if (!this.isQuery) {
      this.getMissionList({});
    } else {
      this.onQuery("wyvonj");
    }
  }

  private async getMissionList(add: any) {
    const params: ReqTaskInfo = {
      offset: this.pagination.offset,
      limit: this.pagination.limit,
      ...add,
      publishStatus: 1
    };
    const { data } = await Api.getTaskList.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      let $data = data.data;
      // 设置总数
      // this.pagination.pageCount = data.data.totalCount;
      // this.pagination.offset += data.data.dataList.length;
      let userId: any = Cookie.get('p_userId');
      $data.dataList.forEach((item: any) => {
        if (item.buyerUserIds !== null) {
          let userIds: Array<string> = item.buyerUserIds.split(",");
          if (userIds.indexOf(userId) === -1) {
            item.showButton = true;
          }
        } else {
          item.showButton = true;
        }
      });

      this.missionList = $data.dataList;
      this.pagination.pageCount = $data.totalCount
        ? Math.ceil($data.totalCount / this.pagination.limit)
        : 1;
    } else {

    }
  }

  /**
   * 任务抢单 抢单之后可以通过上传 订单和评价截图 用于完成任务
   */
  private async joinMission(task: any) {
    const params = {
      taskId: task.taskId
    };
    const { data } = await Api.competeOrder.r(params);
    console.log("getTaskList", data);
    if (data.result === 0) {
      task.scalped = true;
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    } else {
      alert(data.message);
    }
  }

}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);

.mission-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  .image-wrapper {
    height: 10rem;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .info-wrapper {
    border-radius: 9px;
    padding: 9px;
    .title-wrapper {
      height: auto;
      width: 100%;
    }
  }
}

.info-detail {
  .text-left {
    text-align: left;
  }
}

em.emp {
  color: #f44556;
}
.detail-desc {
  .title {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
}
.desc-content {
  padding: 0.3rem;
  ul {
    padding-top: 1rem;
    li {
      text-align: left;
      margin: 0.8rem 0;
    }
  }
}
</style>


